<template>
<div>
  <search-table 
    :url="url" 
    :isApiSearch="true" 
    ref="searchtable" 
    :columns="columns" 
    :form="form" 
    :statusUrl="statusUrl" 
    :xLength="1800"
    :defaultParams="{
      seriesId
    }" 
    @search="handleSearch">
    <template slot="searchForm">
      <a-form layout="inline" :form="form">
        <a-form-item label="产品名称">
          <a-input
            v-decorator="[
              'productName',
            ]"
            placeholder="请输入产品名称"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="上传日期">
          <fast-range-picker
            v-decorator="[
              'startTime-endTime',
            ]"
            >
          </fast-range-picker>
        </a-form-item>
      </a-form>
    </template>
    <template slot="oprationRow">
      <a-space>
        <permission authority="gallery:product:add" v-if="seriesType != 1">
          <a-button type="primary" icon="plus" @click="openNew()">新增套系产品</a-button>
        </permission>
        <permission authority="gallery:product:delete">
          <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)">删除</a-button>
        </permission>
      </a-space>
    </template>
    <template slot="tableOperation" slot-scope="{record}">
      <a-space>
        <permission authority="gallery:product:modify" v-if="seriesType == 1">
          <a href="javascript:;" class="text-primary pointer" @click="openNew(record)">查看</a>
        </permission>
        <permission authority="gallery:product:modify" v-else>
          <a href="javascript:;" class="text-primary pointer" @click="openNew(record)">编辑</a>
        </permission>
        <permission authority="gallery:product:delete" v-if="shopType == 1">
          <a href="javascript:;" class="text-danger" @click="deleteRows([record.id])">删除</a>
        </permission>
      </a-space>
    </template>
  </search-table>
  <new-products ref="newProduct" :seriesType="seriesType" :seriesParams="seriesParams" :record="currentRecord" @cancel="closeNewModal" :visible="newVisible"></new-products>
  <product-detail :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible"></product-detail>
</div>
</template>
<script>
import NewProducts from './galleryList/components/NewProducts'
import ProductDetail from './galleryList/components/ProductDetail'
import PostToStore from './galleryList/components/PostToStore'
import { showPlatformList } from '@/utils/dictData'
import ShopList from '@/components/ShopList/ShopList';

export default {
  name: 'Role',
  data () {
    return {
      userIdTypeOptions: [{
        label: '店长',
        value: 1
      }, {
        label: '店员',
        value: 2
      }],
      url: '/gallery/product/page',
      statusUrl:'/gallery/product/enable',
      newVisible: false,
      infoVisible: false,
      publishVisible: false,
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),
      columns: [
        {
          title: '套系名称',
          dataIndex: 'gallerySeriesName',
          key: 'gallerySeriesName',
          customRender: (text, row) => {
            return this.seriesParams.title
          }
        },
        {
          title: '产品图片',
          dataIndex: 'largeScreenPicture',
          key: 'largeScreenPicture',
          align: 'center',
          customRender: (text, row) => {
            return <table-img src={text}/>
          }
        },
        {
          title: '产品名称',
          dataIndex: 'galleryProductName',
          key: 'galleryProductName'
        },
        {
          title: '所属分类',
          dataIndex: 'galleryClassificationName',
          key: 'galleryClassificationName',
          customRender: (text, row) => {
            return this.seriesParams.seriesClassificationName
          }
        },
        {
          title: '排序',
          dataIndex: 'sort',
          key: 'sort',
          align: 'center'
        },
        {
          title: '展示平台',
          dataIndex: 'exhibitionPlatform',
          key: 'exhibitionPlatform',
          customRender: (text, row) => {
            let arr = text && text.split(',')
            let tmpData = []
            arr.forEach(val => {
              tmpData.push(this.getPlatformName(val))
            })
            return tmpData.join('/')
          }
        },
        {
          title:'是否展示',
          dataIndex:'enableShow',
          key:'enableShow',
          customRender: (text, record) => < a-switch checked={text == 1} onChange={() => this.onEnableShowChangeShow(record, text)} />,
        },
        {
          title: '所属机构',
          dataIndex: 'orgName',
          key: 'orgName',
          align: 'center',
          customRender: (text, row) => {
            return this.seriesParams.orgName
          }
        },
        {
          title: '所属店铺',
          dataIndex: 'shopName',
          key: 'shopName',
          align: 'center',
          customRender: (text, row) => {
            return this.seriesParams.shopName
          }
        },
        {
          title: '上传员工',
          dataIndex: 'createByName',
          key: 'createByName',
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          key: 'createDate'
        },
        {
          title: '最后保存时间',
          dataIndex: 'updateDate',
          key: 'updateDate'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      commodityIds:'',
      shopIds:[],
      whetherOptions: [
        {label: '全部', value: ''},
        {label: '是', value: 1},
        {label: '否', value: 0}
      ],
      isShowPublish:true,
      isShowPublishResult:true
    }
  },
  components: {
    NewProducts,
    ProductDetail,
    PostToStore,
    ShopList
  },
  computed:{
    userInfo(){
      return this.$store.getters.userInfo || {};
    },
    shopId(){
      return this.userInfo.shopId || '';
    },
    // 当前产品所在的套系id
    seriesId() {
      return this.$route.params.id || '';
    },
    // 本店 还是 其他店
    seriesType() {
      return this.$route.params.seriesType || '';
    },
    //当前产品所在的套系对象
    seriesParams() {
      return this.$route.params || {}
    },
    shopType(){
      let shopType=this.$route.query.shopType;
      if(shopType){
        return shopType;
      }
      if(this.userInfo.shopRoleCode=='role:store:main'){
        return 1;
      }
      else if(this.userInfo.shopRoleCode=='role:store:branch'){
        return 2;
      }
      else if(this.userInfo.shopRoleCode=='role:supplier'){
        return 3;
      }
    }//:1,//总店1；分店2；供应商3
  },
  methods: {
    handleProductTypeChange(e){
      console.log('handleProductTypeChange',e)
      this.isShowPublish =! e;
    },
    handleSearch(){
      this.isShowPublishResult=this.isShowPublish;
    },
    // 通过value展示名
    getPlatformName (value) {
      return showPlatformList.map(item => {
        if (item.value == value) {
          return item.label
        }
      }).filter(item => {
        return item
      })
    },
    closeInfoModal (freshTable) {
      this.infoVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },
    // 设为新品
    async changeShow(params) {
      let res = await this.$post(this.statusUrl, params);
      if (res && res.returnCode === 1000) {
        this.$message.success('操作成功!')
        this.$refs.searchtable.refreshTable()
      }
    },
    onEnableShowChangeShow(record, text) {
      this.changeShow({
        galleryProductId: record.id,
        enableShow: text == 1 ? 0 : 1,
      });
    },
    openInfo (record) {
      this.currentRecord = record
      this.infoVisible = true
    },
    closeNewModal (freshTable) {
      this.newVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },
    openNew (record) {
      if (!record) {
        console.log('清空')
        this.$refs.newProduct.resetData()
      }
      this.currentRecord = record
      this.newVisible = true
    },
    deleteRows (ids) {
			if (!ids || ids.length === 0) return this.$message.warn('请先选择一项后再进行操作')
      // ids=ids.map(item=>{
      //   return parseInt(item);
      // })
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: () => {
          this.$post('/gallery/product/delete', { ids,galleryProductType:this.isShowPublishResult?0:1 }).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
// .cover-upload .ant-upload.ant-upload-select-picture-card{
//   width: 300px !important;
//   height: 100px !important;
// }
// .cover-upload.upload-image-component .upload-image-list-item{
//   width: 300px !important;
//   height: 100px !important;
// }
</style>
